<!--
 * @Author: luobei luobei@seewintech.com
 * @Date: 2023-02-23 20:11:19
 * @LastEditors: luobei luobei@seewintech.com
 * @LastEditTime: 2023-02-23 20:35:46
 * @FilePath: \ibuilds-web-system\src\views\systemManage\formManage\formDesign\packages\config\rate.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <el-form-item label="最大星数">
      <el-input-number
        v-model="data.max"
        controls-position="right"
        placeholder="最大星数"
      />
    </el-form-item>
    <el-form-item label="是否显示文本" label-width="110px">
      <el-switch v-model="data.showText" />
    </el-form-item>
    <el-form-item v-if="data.showText" label="自定义文本" label-width="110px">
      <el-tag
        v-for="(tag, index) in data.texts"
        :key="index"
        size="small"
        closable
        @close="handleTextClose(tag)"
      >
        {{ tag }}
      </el-tag>
      <el-input
        v-if="textVisible"
        ref="textTag"
        v-model="textValue"
        class="input-new-tag"
        size="mini"
        clearable
        @keyup.enter.native="handleTextConfirm"
        @blur="handleTextConfirm"
      />
      <el-button
        v-if="!textVisible && data.texts.length < data.max"
        size="mini"
        icon="el-icon-plus"
        circle
        style="margin-left: 5px"
        @click="showTextInput"
      />
    </el-form-item>
    <el-form-item label="自定义颜色" label-width="110px">
      <el-tag
        v-for="(tag, index) in data.colors"
        :key="index"
        closable
        size="small"
        :style="{ color: tag }"
        @close="handleColorClose(tag)"
      >
        {{ tag }}
      </el-tag>
      <el-color-picker
        v-model="colorValue"
        size="mini"
        class="color-picker"
        @change="handleColorConfirm"
      />
    </el-form-item>
    <!--    <el-form-item label="自定义图标">-->
    <!--      <el-tag :key="index" v-for="(tag,index) in data.iconClasses" closable @close="handleIconClose(tag)">{{tag}}-->
    <!--      </el-tag>-->
    <!--      <el-input class="input-new-tag"-->
    <!--                v-if="iconVisible"-->
    <!--                v-model="iconValue"-->
    <!--                size="mini"-->
    <!--                ref="iconTag"-->
    <!--                @keyup.enter.native="handleIconConfirm"-->
    <!--                @blur="handleIconConfirm">-->
    <!--      </el-input>-->
    <!--      <el-button v-else @click="showIconInput" size="mini" icon="el-icon-plus" circle-->
    <!--                 style="margin-left: 5px;"></el-button>-->
    <!--    </el-form-item>-->
  </div>
</template>

<script>
  export default {
    name: 'ConfigRate',
    props: ['data'],
    data() {
      return {
        textVisible: false,
        textValue: '',
        colorVisible: false,
        colorValue: '',
        iconVisible: false,
        iconValue: '',
      }
    },
    methods: {
      handleTextClose(tag) {
        this.data.texts.splice(this.data.texts.indexOf(tag), 1)
      },
      showTextInput() {
        this.textVisible = true
        this.$nextTick(() => {
          this.$refs.textTag.$refs.input.focus()
        })
      },
      handleTextConfirm() {
        if (this.textValue) this.data.texts.push(this.textValue)
        this.textVisible = false
        this.textValue = ''
      },
      handleColorClose(tag) {
        this.data.colors.splice(this.data.colors.indexOf(tag), 1)
      },
      handleColorConfirm() {
        if (this.colorValue) this.data.colors.push(this.colorValue)
        this.colorValue = ''
      },
      // handleIconClose(tag) {
      //   this.data.iconClasses.splice(this.data.iconClasses.indexOf(tag), 1);
      // },
      // showIconInput() {
      //   this.iconVisible = true;
      //   this.$nextTick(() => {
      //     this.$refs.iconTag.$refs.input.focus();
      //   });
      // },
      // handleIconConfirm() {
      //   if (this.iconValue) this.data.iconClasses.push(this.iconValue);
      //   this.iconVisible = false;
      //   this.iconValue = '';
      // }
    },
  }
</script>
<style lang="less" scoped>
  .el-tag {
    vertical-align: top;
  }

  .el-tag + .el-tag {
    margin-left: 5px;
  }

  .input-new-tag {
    width: 90px;
    margin-left: 5px;
    vertical-align: bottom;
  }

  .color-picker {
    left: 10px;
    vertical-align: top;
  }
</style>
